<template>
 <div>
    <div class="userBox">
        <img :src="user.avatar" alt="" class="userimg">
        <span class="userName">{{user.username}}</span>
    </div>
 </div>
</template>
<script>
import store from "@/store";
import { getUserProfile } from "@/api/system/user";
export default {
  props: {
  },
  data() {
    return {
      user:{
      }
    };
  },
  mounted() {
   this.getUser();
  },
  watch: {
   
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        if(!this.user.avatar){
          this.user.avatar = store.getters.avatar;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
 .userBox{
    display:flex;
    align-items: center;
    background:white;
    padding-left:10px;
    margin-top:10px;
    .userimg{
        flex:none;
        width:50px;
        height:50px;
        border-radius: 50%;
    }
    .userName{
        margin-left:10px;
        font-size:14px;
        font-weight: bold;
    }
 }
</style>